@use "theme/globals" as *;

:host {
    ion-tabs {
        --menutabbar-size: var(--bottom-tabs-size);
    }

    ion-tabs.placement-side {
        --menutabbar-size: var(--side-tabs-size);
    }

    --network-margin-bottom: 0px;
    --network-message-background: transparent;
    --network-message-offline: none;
    --network-message-online: none;
    --network-message-height: 16px;
}

:host-context(.core-online),
:host-context(.core-offline) {
    .core-network-message {
        visibility: visible;
        height: var(--network-message-height);
        line-height: var(--network-message-height);
        padding-bottom: calc(var(--ion-safe-area-bottom, 0px) + var(--network-message-height));
    }
}

:host-context(.core-online) {
    --network-margin-bottom: 8px;

    --network-message-background: var(--success);
    --network-message-online: block;
}

:host-context(.core-offline) {
    --network-margin-bottom: 8px;

    --network-message-background: var(--danger);
    --network-message-offline: block;
}

ion-tab-bar {
    --background: var(--core-bottom-tabs-background);
    --color: var(--core-bottom-tabs-color);
    --color-selected: var(--core-bottom-tabs-color-selected);
    --background-selected: var(--core-bottom-tabs-background-selected);

    height: var(--menutabbar-size);
}

core-user-menu-button {
    align-items: center;
    display: flex;
    justify-content: center;
}

ion-tab-button {
    color: var(--ion-text-color-step-400);

    &.tab-selected {
        color: var(--dark);
        background: var(--background-selected);
    }

    ion-icon.core-tab-icon {
        text-overflow: unset;
        overflow: visible;
        text-align: center;
        font-size: var(--mdl-typography-icon-fontSize-lg);
    }

    ion-badge.core-tab-badge {
        font-size: var(--mdl-typography-body-fontSize-sm);
        font-weight: bold;
        border-radius: 10px;
        padding-left: 6px;
        padding-right: 6px;
        line-height: 14px;
        --background: var(--core-bottom-tabs-badge-color);
        --color: var(--core-bottom-tabs-badge-text-color);
    }

    ion-icon.core-tab-badge {
        color: var(--core-bottom-tabs-badge-color);
        padding: 3px 6px 2px;
        @include position(8px, null, null, calc(50% + 6px));
        min-width: 12px;
        font-size: #{dynamic-font(8px)};
        font-weight: normal;
        box-sizing: border-box;
        position: absolute;
        z-index: 1;
    }
}

ion-tabs {
    core-loading {
        --loading-placeholder-gap: 12px;

        --loading-placeholder-padding: 4px;
        --loading-placeholder-margin: 0px;
        --loading-placeholder-element-radius: 100%;

        --loading-placeholder-element-width: 44px;
        --loading-placeholder-element-height: 44px;
        --loading-placeholder-element-column-width: 44px;
    }

    &.placement-bottom {
        core-loading {
            --loading-placeholder-align-content: flex-start;
            --loading-placeholder-justify: center;
            --loading-placeholder-max-height: 52px;
        }

        ion-tab-button {
            border-top: 4px solid transparent;
            border-bottom: 4px solid transparent;

            &.tab-selected {
                border-top-color: var(--core-tab-border-color-active);
            }

            ion-icon.core-tab-icon {
                margin-bottom: var(--network-margin-bottom);
                transition: margin 500ms ease-in-out, transform 300ms ease-in-out;
            }

            ion-icon.core-tab-badge,
            ion-badge.core-tab-badge {
                top: 8px;
            }
        }

        @if ($core-always-show-main-menu) {
            ion-tab-bar {
                height: var(--menutabbar-size) !important;
                visibility: visible !important;
                transform: translateY(0) !important;
            }
        } @else {
            &.tabshidden ion-tab-bar {
                pointer-events: none;

                ion-tab-button {
                    height: auto;
                }
            }
        }
    }

    &.placement-side {
        flex-direction: row;

        ion-tab-bar {
            order: -1;
            width: var(--menutabbar-size);
            height: calc(100% - var(--ion-safe-area-top) - var(--ion-safe-area-bottom));
            flex-direction: column;
            @include border-end(var(--border));
            border-top: 0;
            justify-content: flex-start;

            @include padding(var(--ion-safe-area-top), 0px, var(--ion-safe-area-bottom), var(--ion-safe-area-left));

            ion-tab-button {
                --padding-start: 0;
                --padding-end: 0;
                border-left: 4px solid transparent;
                border-right: 4px solid transparent;

                &.tab-selected {
                    border-left-color: var(--core-tab-border-color-active);
                }

                ion-badge.core-tab-badge {
                    @include position(null, 1px, null, auto);
                }
            }


            ion-tab-button, core-user-menu-button {
                width: 100%;
                min-height: calc(var(--menutabbar-size) - 8px);
                flex: 0;

                ion-icon.core-tab-badge,
                ion-badge.core-tab-badge {
                    top: calc(50% - 20px);
                }
            }
        }
    }
}

.core-network-message {
    background: var(--network-message-background);
    pointer-events: none;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding-left: 10px;
    padding-right: 10px;
    text-align: center;
    color: white;
    visibility: hidden;
    height: 0;
    transition: all 500ms ease-in-out;
    opacity: .8;
    z-index: 12;
    font-size: var(--mdl-typography-body-font-sm);

    .core-online-message {
        display: var(--network-message-online);
    }

    .core-offline-message {
        display: var(--network-message-offline);
    }
}
